import React, {Component} from 'react';
import {
  View,
  Text,
  Alert,
  Button,
  ToastAndroid,
  TextInput,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
  ScrollView,
  Image,
  ImageBackground,
  Linking,
} from 'react-native';
import {Market, CommonImg} from '../../images/index';
let widthScreen = Dimensions.get('window').width;
let heightScreen = Dimensions.get('window').height;
export default class Activity extends Component {
  static defaultProps = {
    short: '或许有些人天生就比较能熬夜？',
    title: '来测测你的熬夜基因',
    img: 'empty',
  };
  constructor(props) {
    super(props);
  }
  render() {
    const {pressFunc} = this.props;
    return (
      <TouchableOpacity
        style={{marginTop: heightScreen * 0.0215}}
        onPress={() => {
          pressFunc();
        }}>
        <View
          style={{
            height: widthScreen * 0.4533,
            backgroundColor: '#FFFFFF',
            width: widthScreen * 0.9533,
            marginLeft: (widthScreen * (1 - 0.9533)) / 2,
            borderRadius: heightScreen * 0.0077,
          }}>
          <View
            style={{
              height: widthScreen * 0.3333,
              backgroundColor: '#989898',
              borderTopRightRadius: heightScreen * 0.0077,
              borderTopLeftRadius: heightScreen * 0.0077,
            }}>
            <ImageBackground
              style={{
                height: widthScreen * 0.3333,
                backgroundColor: '#989898',
                borderTopRightRadius: heightScreen * 0.0077,
                borderTopLeftRadius: heightScreen * 0.0077,
              }}
              imageStyle={{
                borderTopRightRadius: heightScreen * 0.0077,
                borderTopLeftRadius: heightScreen * 0.0077,
              }}
              source={{uri: this.props.img}}>
              <ImageBackground
                style={{
                  height: widthScreen * 0.1227,
                  marginTop: widthScreen * 0.2106,
                }}
                source={Market.shadow}>
                <Text style={textStyles.white23}>{this.props.title}</Text>
              </ImageBackground>
            </ImageBackground>
          </View>
          <View
            style={{
              flexDirection: 'row',
              height: widthScreen * 0.12,
              alignItems: 'center',
              justifyContent: 'space-between',
            }}>
            <Text style={{marginLeft: heightScreen * 0.0154}}>
              {this.props.short}
            </Text>
            <Image source={CommonImg.Arrow} style={iconStyles.forward} />
          </View>
        </View>
      </TouchableOpacity>
    );
  }
}
const iconStyles = StyleSheet.create({
  forward: {
    width: heightScreen * 0.0123,
    height: heightScreen * 0.0215,
    marginRight: heightScreen * 0.02,
    marginTop: heightScreen * 0.005,
  },
});
const textStyles = StyleSheet.create({
  white23: {
    //fontFamily: 'MicrosoftYaHei',
    fontSize: heightScreen * 0.023,
    color: '#FFFFFF',
    fontWeight: 'bold',
    marginLeft: heightScreen * 0.025,
    marginTop: heightScreen * 0.022,
  },
});
